<template>
  <div class="challenge-game-container">
    <h1>限时挑战</h1>
    <div class="challenge-area">
      <div class="challenge-word">{{ currentWord }}</div>
    </div>
    <input v-model="inputValue" @keyup.enter="checkInput" class="challenge-input" placeholder="输入单词并回车..." :disabled="!isRunning" />
    <div class="challenge-info">
      <span>得分：{{ score }}</span>
      <span>时间：{{ timeLeft }}s</span>
    </div>
    <button @click="startGame" v-if="!isRunning" class="challenge-btn">开始挑战</button>
    <button @click="startGame" v-if="isRunning && timeLeft === 0" class="challenge-btn">重玩</button>
  </div>
</template>
<script>
function getRandomWord() {
  const list = ['apple','banana','cat','dog','hello','world','vue','javascript','rain','type','speed','game','code','input','score','cloud','mouse','keyboard','quick','fox','jump','blue','green','red','yellow','happy','fast','slow','star','moon','sun'];
  return list[Math.floor(Math.random() * list.length)];
}
export default {
  name: 'TypingGameChallenge',
  data() {
    return {
      currentWord: '',
      inputValue: '',
      score: 0,
      isRunning: false,
      timeLeft: 30,
      timer: null
    }
  },
  methods: {
    startGame() {
      this.inputValue = '';
      this.score = 0;
      this.isRunning = true;
      this.timeLeft = 30;
      this.currentWord = getRandomWord();
      if (this.timer) clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.timeLeft--;
        if (this.timeLeft <= 0) {
          this.isRunning = false;
          clearInterval(this.timer);
        }
      }, 1000);
    },
    checkInput() {
      if (this.inputValue.trim() === this.currentWord) {
        this.score++;
        this.currentWord = getRandomWord();
        this.inputValue = '';
      }
    }
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
  }
}
</script>
<style scoped>
.challenge-game-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 2rem;
  background: var(--hover-color);
  border-radius: 10px;
  color: var(--text-color);
  text-align: center;
}
.challenge-area {
  margin-bottom: 2rem;
}
.challenge-word {
  font-size: 2rem;
  color: #1976d2;
  font-weight: bold;
  margin-bottom: 1rem;
}
.challenge-input {
  width: 60%;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.challenge-info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}
.challenge-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  margin-top: 1rem;
}
.challenge-btn:hover {
  background: #1565c0;
}
</style> 